<template>
     <div class="table-item">
      <basic-table :columns="columns" :tableData="tableDataPage" :tableDataAll="tableData" :total="tableData.length"
        :pageSize="pageParams.pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
        :emptySmall="true"   size="mini"
        style="margin-top: 15px;">

      </basic-table>
     </div>
</el-dialog>
</template>

<script>
export default {
  name: "ShowTable",
  props: {
    showTableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      tableData: [],
      pageParams:{
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  watch: {
      "showTableData": {
        immediate: true,
        handler(val) {
          if (val) {
            this.tableData=this.showTableData;
          }
        }
      },
      "showColumns": {
        immediate: true,
        handler(val) {
          if (val) {
            this.columns=this.showColumns;
          }
        }
      }
    },
    computed: {
      tableDataPage() {
        let arr = this.tableData;
        const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
        const end = this.pageParams.pageNum * this.pageParams.pageSize;
        return arr.slice(start, end);
      },
    },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val.pageSize;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val.currentPage;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-empty {
  padding: 0;
  .el-empty__image {
    width: 80px !important;
  }
  .el-empty__description {
    margin-top: 0px;
  }
}
.addBtn {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
  padding: 6px 5px;
}
</style>
